<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        v-model="listQuery.userName"
        placeholder="Contract Id"
        style="width: 200px;"
        class="filter-item"
      />

      <el-button
        v-waves
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter"
      >Search</el-button>
      <el-button
        round
        v-waves
        class="filter-item"
        type="suceess"
        icon="el-icon-refresh"
        @click="handleFilterReset"
      >Reset</el-button>
      <el-button
        round
        class="filter-item"
        style="margin-left: 10px;"
        type="primary"
        icon="el-icon-edit"
        @click="add()"
      >Add</el-button>

      <el-button
        round
        class="filter-item"
        style="margin-left: 10px;"
        type="danger"
        icon="el-icon-delete"
        @click="handleDelete"
      >Deletes</el-button>
    </div>

    <div>
      <el-table
        border
        stripe
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="contract" label="订单号" align="center" width="120">
          <!-- <template slot-scope="scope">{{ scope.row.contract }}</template> -->
        </el-table-column>
        <el-table-column prop="cargo" label="货物名" align="center" width="120"></el-table-column>
        <el-table-column prop="value" label="货物价值" align="center" width="120"></el-table-column>
        <el-table-column prop="type" label="货物类型" align="center" width="120"></el-table-column>
        <el-table-column prop="cost" label="订单收费" align="center" width="120"></el-table-column>
        <el-table-column prop="destination" label="目的地" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="origin" label="出发地" align="center" show-overflow-tooltip></el-table-column>

        <el-table-column
          label="操作"
          align="center"
          width="230"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="{row,$index}">
            <el-button round type="primary" size="mini" @click="handleUpdate(row)">Edit</el-button>
            <el-button
              round
              v-if="row.status!='deleted'"
              size="mini"
              type="danger"
              @click="handleDelete(row,$index)"
            >Delete</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
      ></el-pagination>
    </div>

    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="订单号" style="width: 360px;">
          <el-input v-model="form.contract"></el-input>
        </el-form-item>
        <el-form-item label="货物名" style="width: 360px;">
          <el-input v-model="form.cargo"></el-input>
        </el-form-item>
        <el-form-item label="货物价值" style="width: 360px;">
          <el-input v-model="form.value"></el-input>
        </el-form-item>

        <el-form-item label="货物类型">
          <el-select v-model="form.type" placeholder="请选择货物类型">
            <el-option label="A类" value="A类"></el-option>
            <el-option label="B类" value="B类"></el-option>
            <el-option label="C类" value="C类"></el-option>
            <el-option label="D类" value="D类"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目的地" style="width: 360px;">
          <el-input v-model="form.destination"></el-input>
        </el-form-item>
        <el-form-item label="出发地" style="width: 360px;">
          <el-input v-model="form.origin"></el-input>
        </el-form-item>
        <el-form-item label="订单收费" style="width: 360px;">
          <el-input v-model="form.cost"></el-input>
        </el-form-item>
        <el-form-item style="center">
          <el-button type="primary" @click="onSubmit">确定</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
      <!-- 
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
      -->
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      listQuery: {
        page: 1,
        limit: 20,
        userName: undefined,
        gender: undefined,
        status: undefined,
        sort: "ASC",
      },
      dialogVisible: false,
      multipleSelection: [],
      tableData: [
        {
          contract: "01",
          cargo: "货物D",
          value: "6000",
          type: "C类",
          destination: "A地",
          origin: "B地",
          cost: "3000",
        },
        {
          contract: "02",
          cargo: "货物D",
          value: "8000",
          type: "C类",
          destination: "A地",
          origin: "B地",
          cost: "3000",
        },
      ],
      form: {
        contract: "",
        cargo: "",
        value: "",
        type: "",
        destination: "",
        origin: "",
        cost: "",
      },
      temp: {
        contract: "",
        cargo: "",
        value: "",
        type: "",
        destination: "",
        origin: "",
        cost: "",
      },
    };
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    add() {
      this.form.contract = "";
      this.form.cargo = "";
      this.form.value = "";
      this.form.type = "";
      this.form.destination = "";
      this.form.origin = "";
      this.form.cost = "";
      this.dialogVisible = true;
    },
    handleUpdate(row) {
      this.temp = Object.assign({}, row);
      this.form.contract = this.temp.contract;
      this.form.cargo = this.temp.cargo;
      this.form.value = this.temp.value;
      this.form.type = this.temp.type;
      this.form.destination = this.temp.destination;
      this.form.origin = this.temp.origin;
      this.form.cost = this.temp.cost;
      this.dialogVisible = true;
    },
    handleDelete(row, index) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    onSubmit() {
      this.$alert("success!", "edit", {
        confirmButtonText: "确定",
      });
    },
  },
};
</script>

